<template>
  <div class="basic-from" v-dialogDrag>
    <el-dialog
      custom-class="small-padding-dialog"
      :close-on-click-modal="false"
      :title="title"
      :visible.sync="dialogVisible"
      :width="width"
      @close="handleClosed"
    >
      <el-form
        :model="formData"
        ref="form"
        class="form-wrap"
        style="padding-top:0px;"
        :rules="rules"
      >
        <el-form-item
          :label="item.label"
          prop="approvePerson"
          v-for="item in popUpdata"
          :key="item.key"
          :class="item.class"
        >
          <el-input
            v-model="item.value"
            placeholder="请输入"
            v-if="item.type === 'input'"
          />

          <el-radio-group
            v-model="item.value"
            v-else-if="item.type === 'radio'"
          >
            <el-radio
              :label="data.value"
              v-for="(data, index) in item.options"
              :key="index"
              >{{ data.label }}</el-radio
            >
          </el-radio-group>

          <el-input
            v-model="item.value"
            type="textarea"
            placeholder="请输入"
            v-else-if="item.type === 'textarea'"
          />

          <el-date-picker
            value-format="yyyy-MM-dd"
            v-model="item.value"
            type="date"
            placeholder="选择日期"
            v-else-if="item.type === 'time'"
          ></el-date-picker>

          <el-select
            clearable
            v-model="item.value"
            placeholder="请选择"
            :disabled="type === 'preview'"
            filterable
            v-else-if="item.type === 'select'"
          >
            <el-option
              v-for="data in item.options"
              :key="data.value"
              :label="data.label"
              :value="data.value"
            />
          </el-select>

           <el-input
            v-model="item.secondValue"
            placeholder="请输入"
            v-if="item.label === '隔离类型' && item.value === 5"
          />
        </el-form-item>
        <!-- <el-form-item label="性别" prop="isQualified">
          <el-select clearable v-model="formData.b" placeholder="请选择" :disabled="type === 'preview'" filterable>
            <el-option v-for="item in isQualifieds" :key="item.value" :label="item.label" :value="item.value" />
          </el-select>
        </el-form-item>
        <el-form-item label="年龄" prop="isQualified">
          <el-input v-model="formData.c" readonly placeholder="请输入" />
        </el-form-item>
        
        <el-form-item label="身份证号或其它证件号" prop="approvePerson">
          <el-input v-model="formData.d" readonly placeholder="请输入" />
        </el-form-item>
        <el-form-item label="房间号"  prop="approvePerson">
          <el-input v-model="formData.e" readonly placeholder="请输入" />
        </el-form-item>
        
        <el-form-item label="隔离类型" prop="approvePerson"  class="full" >
           <el-radio-group v-model="radio">
            <el-radio :label="3">备选项</el-radio>
            <el-radio :label="6">备选项</el-radio>
            <el-radio :label="9">备选项</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="转密原因" prop="opinion">
          <el-input v-model="formData.l" type="textarea" maxlength="10" placeholder="请输入" />
        </el-form-item>
        <el-form-item label="判断时间" prop="approveDate">
          <el-date-picker value-format="yyyy-MM-dd" v-model="formData.j" type="date" placeholder="选择日期"></el-date-picker>
        </el-form-item>
        <el-form-item label="隔离调整情况" prop="approvePerson">
          <el-input v-model="formData.l" type="textarea" maxlength="10" placeholder="请输入" />
          <!-- <el-select clearable v-model="formData.g" filterable placeholder="请选择">
            <el-option label="是" :value="3" />
            <el-option label="否" :value="4" />
          </el-select> -->
        <!-- </el-form-item> -->
        <!-- <el-form-item label="隔离点联系人" prop="approvePerson">
          <el-input v-model="formData.h" readonly placeholder="请输入" />
        </el-form-item>
        <el-form-item label="隔离点联系电话" prop="approvePerson">
          <el-input v-model="formData.i" readonly placeholder="请输入" />
        </el-form-item>
        <el-form-item label="使用开始时间" prop="approveDate">
          <el-date-picker value-format="yyyy-MM-dd" v-model="formData.j" type="date" placeholder="选择日期"></el-date-picker>
        </el-form-item>
        <el-form-item label="使用终止时间" prop="approveDate">
          <el-date-picker value-format="yyyy-MM-dd" v-model="formData.k" type="date" placeholder="选择日期"></el-date-picker>
        </el-form-item>
        <el-form-item label="备注" class="full" prop="opinion">
          <el-input v-model="formData.l" type="textarea" maxlength="10" placeholder="请输入" />
        </el-form-item>  -->
      </el-form>

      <slot name="custom"></slot>
      
      <div slot="footer">
        <el-button v-if="type !== 'preview'" type="primary" @click="save"
          >提交</el-button
        >
        <el-button @click="dialogVisible = false">关闭</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
/**
 *  @param {string} label   // 表单名称
 *  @param {string} value   // 表单值
 *  @param {string} key   // 表单key值
 *  @param {string} type   // 组件类型 input 输入框 select 下拉框  redio 单选框 time 时间  textarea 多文本输入框
 *  @param {Array} options   // 组件类型 select redio 数据
 */
import moment from 'moment';
import {
  changeQuestion,
  approvalQuestion,
  getApproveInfo,
  getUploadFiles,
} from '@/views/wy-operate/api/repair.js';
export default {
  name: 'hotelDialog',
  inject: ['initList'],
  props: {
    // form表单数据
    popUpdata: {
      type: Array,
      default: () => {
        return [];
      },
    },
    title: {
      type: String,
      default: ""
    },
    width: {
      type: String,
      default: "50%"
    },
  },
  data() {
    return {
      //弹窗类型，默认新增
      type: 'add',
      //选中的物业
      radioId: '',
      //弹窗开关
      dialogVisible: false,
      // 表单项
      formData: {
        a: '',
        b: '',
        c: '',
        d: '',
        e: '',
        f: '',
        g: '',
        h: '',
        i: '',
        j: '',
        k: '',
        l: '',
        m: '',
      },
      // 校验
      rules: {
        // initiator: [{ required: true, message: "上报人不能为空", trigger: "blur" }],
        // initiateTime: [{ required: true, message: "上报时间不能为空", trigger: "blur" }],
        // propertyName: [{ required: true, message: "物业名称不能为空", trigger: "blur" }],
        // problemDesc: [{ required: true, message: "问题描述不能为空", trigger: "blur" }],
      },
      options: [
        { label: '密接者', value: 0 },
        { label: '次密接', value: 0 },
        { label: '入境人员', value: 0 },
        { label: '国内重点人群', value: 0 },
        { label: '出院观察', value: 0 },
        { label: '其他', value: 0 },
      ],
    };
  },
  computed: {
    // 判断是否只读
    isReadonly() {
      return ['preview', 'approval'].includes(this.type);
    },
    isQualifieds() {
      return [];
    },
  },
  methods: {
    //开启弹窗
    async show({ type, data = {} }) {
      console.log(123);
      if (['preview', 'edit', 'approval'].includes(type)) {
        const res = await this.http(`/api/repairbill/${data.billId}`);
        this.formData =
          type === 'approval'
            ? { ...this.formData, ...this.approvalForm, ...res.data.data }
            : { ...this.formData, ...res.data.data };
        this.$nextTick(() => {
          this.$refs.upload && this.$refs.upload.getFiles(data.billId);
        });
        // 获取审批结果信息
        data.billStatus && this.getStatus(data.billId);
      }
      this.type = type;
      this.dialogVisible = true;
    },
    // 获取审批相关信息
    getStatus(billId) {
      getApproveInfo(billId).then((res) => {
        const { records } = res.data.data;
        if (records.length) {
          this.approvalForm = {
            ...records[0],
            result: this.formData.billStatus == 11 ? '1' : '0',
          };
        }
        this.approvalList = records;
      });
    },
    // 提交新增
    async save() {
      try {
        const valid = await this.$refs.dialogForm.validate();
        if (!valid) return;
        if (this.type === 'approval') {
          let { result, approveContent, approvePerson } = this.formData;
          let params = {
            approveContent,
            approvePerson,
            approveTm: moment().format('YYYY-MM-DD hh:mm:ss'),
            billId: this.formData.billId,
          };
          approvalQuestion(params, result).then((res) => {
            if (res.data.code == 0) {
              this.$message.success(`${this.dialogTitle}成功!`);
              this.initList({ keyword: '', current: 1 });
              this.dialogVisible = false;
            } else {
              this.$message.error(res.data.msg);
            }
          });
        } else {
          this.$refs.upload.submit('repairQuestion', this.formData.billId);
        }
      } catch (error) {
        //console.log(error)
      }
    },
    // 上传成功
    async onSuccess(response, file, fileList) {
      let params =
        this.type == 'add'
          ? { ...this.formData, billId: response.data }
          : this.formData;
      const res = await changeQuestion(params, this.type);
      if (res.data.code == 0) {
        this.$message.success(`${this.dialogTitle}成功!`);
        this.initList({ keyword: '', current: 1 });
        this.dialogVisible = false;
      } else {
        this.$message.error(res.data.msg);
      }
    },
    // 选择物业名称
    chooseProperty() {
      this.$refs.propertyChoose.show('question');
    },
    // 监听物业改变
    handlePropertyChange(data) {
      this.formData = {
        ...this.formData,
        address: data.address,
        propertyName: data.propertyName,
        roomId: data.roomId,
        propertyType: data.propertyType,
      };
    },
    // 获取审批状态名称
    getStatusName(status = this.formData.billId) {
      return (
        {
          '10': '待审核',
          '11': '待审核',
          '12': '审核通过',
          '13': '审核不通过',
          '14': '验收通过',
          '15': '验收未通过',
        }[status] || ''
      );
    },
    // 弹窗关闭还原
    handleClosed() {
      this.uploadFileList = [];
      // let _formData = JSON.parse(JSON.stringify(this.formData));
      // let _approvalForm = JSON.parse(JSON.stringify(this.approvalForm));
      // for (let i in _formData) {
      //   _formData[i] = '';
      // }
      // for (let i in _approvalForm) {
      //   _approvalForm[i] = '';
      // }
      // this.formData = _formData;
      // this.approvalForm = _approvalForm;
      this.approvalList = [];
      this.$refs.dialogForm.resetFields();
    },
  },
};
</script>

<style lang="scss" scoped>
.addDialog {
  /deep/ .el-date-editor--datetime {
    width: 100%;
  }
  .album {
    .el-col {
      margin-bottom: 20px;
    }
    .img {
      width: 100%;
      height: 200px;
    }
  }
}
</style>
